<script setup>
import { getHomeAllData } from '@/api/home.js'
import { onMounted, ref, provide } from 'vue'
import { RouterView } from 'vue-router'
import { useCartStore } from '@/stores/cart'
const cartStore = useCartStore()

defineOptions({
  name: 'ShopLayout'
})

const homeData = ref(null)

const flush = async (
  obj = {
    page: 1,
    sales: 1,
    recommend: 0,
    new: 0
  }
) => {
  const res = await getHomeAllData(obj)
  homeData.value = res
}

onMounted(() => flush())

provide('homeData', homeData)
provide('togHomeData', flush)
</script>

<template>
  <ShopNavbar
    :title="
      {
        '/home': '图书兄弟',
        '/category': '商品分类',
        '/cart': '购物车',
        '/mine': '个人中心'
      }[$route.path]
    "
  ></ShopNavbar>

  <RouterView v-slot="{ Component }">
    <transition>
      <component class="children" :is="Component"></component>
    </transition>
  </RouterView>
  <van-tabbar active-color="#FFA666" route fixed>
    <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/category" icon="list-switching">分类</van-tabbar-item>
    <van-tabbar-item to="/cart" icon="cart-o" :badge="cartStore.cartList.length"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item to="/mine" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
  <van-back-top style="background-color: red" />
</template>

<style scoped>
.v-enter-from {
  opacity: 0;
  transform: translateX(150px);
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-150px);
}
.children {
  transition: 0.5s;
  position: absolute;
  top: 46px;
  width: 100%;
}
</style>
